<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';
import { updatePreferences } from '@vben/preferences';

import useDraw from '../useDraw.js';
import BottomLeft from './chart-view/bottom-left/index.vue';
import BottomRight from './chart-view/bottom-right/index.vue';
import TopCenter from './chart-view/top-center/index.vue';
import TopLeftBottom from './chart-view/top-left-bottom/index.vue';
import TopLeftTop from './chart-view/top-left-top/index.vue';
import TopRightBottom from './chart-view/top-right-bottom/index.vue';
import TopRightTop from './chart-view/top-right-top/index.vue';

onMounted(() => {
  closeLoading();
  calcRate();
  windowDraw();
  window.addEventListener('keydown', handleEscKeydown);
  updatePreferences({
    app: {
      layout: 'full-content',
    },
    header: {
      enable: false,
    },
    sidebar: {
      collapsed: true,
    },
    tabbar: {
      enable: false,
    },
  });
});
onUnmounted(() => {
  unWindowDraw();
  window.removeEventListener('keydown', handleEscKeydown);
});

// 响应式自适应
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
// 全局loading
const loading = ref(true);
// 标题
const title = ref('京彩E家人小程序数据分析');
// 路由
const router = useRouter();

// 关闭loading
const closeLoading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
// 监听esc键
const handleEscKeydown = (event) => {
  if (event.key === 'Escape') {
    router.back();
    updatePreferences({
      app: {
        layout: 'sidebar-nav',
      },
      header: {
        enable: true,
      },
      sidebar: {
        collapsed: false,
      },
      tabbar: {
        enable: false,
      },
    });
  }
};
</script>

<template>
  <Page :auto-content-height="true" class="map-container">
    <div id="map-box" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else style="width: 100%; height: 100%">
          <div class="header">
            <div class="move-line"></div>
            <div class="header-title">{{ title }}</div>
            <img class="header-bg" src="../../../assets/header-04.png" />
          </div>

          <div class="map-container-box">
            <div class="top-chartBox">
              <div class="top-left">
                <div class="top-left-top">
                  <TopLeftTop />
                </div>
                <div class="top-left-bottom">
                  <TopLeftBottom />
                </div>
              </div>
              <div class="top-center">
                <TopCenter />
              </div>
              <div class="top-right">
                <div class="top-right-top">
                  <TopRightTop />
                </div>
                <div class="top-right-bottom">
                  <TopRightBottom />
                </div>
              </div>
            </div>
            <div class="bottom-chartBox">
              <div class="bottom-left">
                <BottomLeft />
              </div>
              <div class="bottom-right">
                <BottomRight />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<style lang="scss" scoped>
.map-container-box {
  height: calc(100% - 50px);
  padding-top: 10px;
  padding-bottom: 10px;

  .top-chartBox {
    height: 60%;
    display: flex;

    .top-left {
      width: 25%;
      height: 100%;

      .top-left-top {
        height: 50%;
      }

      .top-left-bottom {
        height: 50%;
      }
    }

    .top-center {
      width: 50%;
      height: 100%;
    }

    .top-right {
      width: 25%;
      height: 100%;

      .top-right-top {
        height: 50%;
      }

      .top-right-bottom {
        height: 50%;
      }
    }
  }

  .bottom-chartBox {
    height: 40%;
    display: flex;

    .bottom-left {
      width: 50%;
      height: 100%;
    }

    .bottom-right {
      width: 50%;
      height: 100%;
    }
  }
}

.header {
  height: 50px; // 增加高度
  width: 100%;
  position: relative;

  .move-line {
    position: absolute;
    width: 106px;
    height: 28px;
    position: absolute;
    bottom: -11px;
    background: url(../../../assets/line-bg.png) no-repeat;
    background-size: 100% 100%;
    animation: moveLeftToRight 4s linear infinite; // 修改动画时间和效果
    left: 0;
  }

  @keyframes moveLeftToRight {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(100vw - 106px));
    }
  }

  .header-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 2.8rem;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );
    margin: 0 50px;
    min-width: 250px;
    text-align: center;
  }

  .header-bg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    z-index: 0;
    height: 3.84rem;
    width: 100%;
  }
}

.map-container {
  padding: 0 !important;
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0 !important;

  ::v-deep(.h-full) {
    padding: 0 !important;
  }

  #map-box {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    background-color: blanchedalmond;

    .bg {
      width: 100%;
      height: 100%;
      padding: 12px 12px 0 12px;
      box-sizing: border-box;
      background-image: url('../../../assets/pageBg.png');
      background-size: cover;
      background-position: center center;
    }
  }
}
</style>
